<template>
  <div class="song-list">
    <ul
      v-for="(item,index) in songlist"
      class="song"
      :key="index"
    >

      <div class="ranking">
        <span>{{index+1}}.</span>
      </div>
      <div class="text">
        <h3>{{item.songname}}</h3>
        <p>{{item.singername+'·'+item.albumname}}</p>
      </div>

      <!-- <slot></slot> -->
    </ul>
  </div>
</template>
<script>

import { mapGetters, mapActions } from 'vuex'

export default {
  components: {

  },
  data() {
    return {
      isShow: this.show
    }
  },
  created() {
    // console.log(this.songlist)
  },
  computed: {
    ...mapGetters([
      'currentSong'
    ]),
  },
  props: {
    show: {
      type: Boolean,
      default: true
    },
    songlist: {
      type: Array,
      default: function () {
        return []
      }
    },
    isShowIndex: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    ...mapActions([
      'selectPlay'
    ]),
    isplaying(index) {
      if (this.currentSong.id === this.songlist[index].id) {
        return true
      }
    },
    selectItem(index) {
      let list = this.songlist.slice()
      this.selectPlay({
        list,
        index
      })
    },
    playAll() {
      this.selectItem(0)
      this.isShow = false
    }
  }
}
</script>
<style scoped>

.song-list .loading-container {
  margin: 150px 0;
}
.song-list ul {
  position: relative;
  background-color: papayawhip;
}
.song-list .playall {
  position: absolute;
  top: 20px;
  right: -10px;
  width: 95px;
  height: 23px;
  line-height: 23px;
  border-radius: 20px;
  background-color: #31c27c;
  text-align: center;
  color: #fff;
  font-size: 14px;
}
.slide-enter-active,
.slide-leave-active {
  transition: 0.5s;
}
.slide-enter,
.slide-leave-to {
  transform: translateX(85px);
}
.song-list .song {
  display: flex;
  align-items: center;
  padding: 0 30px 0 20px;
  margin: 20px 0;
  border-left: 3px solid #fff;
}
.song-list .song:nth-child(-n + 4) .ranking {
  color: #ff400b;
}
.song-list .ranking {
  height: 80%;
  margin-right: 20px;
  font-size: 16px;
  color: #777;
  font-weight: bold;
}
.song-list .text {
  width: 80%;
}
.song-list h3 {
  color: #444;
  font-size: 15px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.song-list p {
  color: #777;
  font-size: 14px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.song-list .playing-item {
  color: #31c27c;
}
.song-list .playing-item-b {
  border-left: 3px solid #31c27c;
}
</style>